<template>
  <div class="container">
        <!-- 添加通告栏 -->
        <div class="announcement" v-if="isAnnouncementVisible">
            <div class="announcement-content">
                <span class="announcement-icon">📢</span>
                <span class="announcement-text">欢迎来到我的博客！这里会定期分享技术文章和生活感悟。</span>
            </div>
            <button class="announcement-close" @click="closeAnnouncement">×</button>
        </div>
        
        <AtjHeader></AtjHeader>
        <!-- 添加搜索栏 -->
        <div class="search-container">
            <div class="search-box">
                <input 
                    type="text" 
                    v-model="searchQuery" 
                    @input="handleSearch"
                    placeholder="搜索文章..."
                    class="search-input"
                />
                <button class="search-button" @click="handleSearch">
                    <i class="search-icon">🔍</i>
                </button>
            </div>
            <!-- 搜索结果计数 -->
            <div class="search-results-count" v-if="searchQuery">
                找到 {{ total }} 条相关结果
            </div>
        </div>
        <div class="main-content">
          <div class="articles-section">
            <article class="post" v-for="item in articles" :key="item.id">
                <!-- 使用 v-html 显示高亮的标题 -->
                <h2 v-html="highlightText(item.title)"></h2>
                <div class="post-meta">
                    <span class="date">{{formatDate(item.updated_at)}}</span>
                    <span class="category">{{item.category_name}}</span>
                    <span class="read-count">阅读 {{item.view_count}}</span>
                </div>
                <!-- 使用 v-html 显示高亮的描述 -->
                <div class="post-excerpt">
                    <p v-html="highlightText(item.description)"></p>
                </div>
                <div class="post-tags" v-if="item.tags && item.tags.length">
                    <span class="tag" v-for="tag in item.tags" :key="tag.id">
                        <span class="tag-icon">🏷️</span>
                        <span v-html="highlightText(tag)"></span>
                    </span>
                </div>
                <a @click="goToArticle(item.id)" class="read-more">阅读更多</a>
            </article>
          </div>

            <aside class="sidebar">
                <div class="about-me">
                    <h3>关于我</h3>
                    <img src="@/assets/img/avatar.jpg" alt="头像" class="avatar">
                    <p>你干嘛-哎哟</p>
                </div>
                
                <div class="categories">
                    <h3>文章分类</h3>
                    <ul>
                        <li>
                            <a href="article.html" class="category-item">
                                <span class="category-icon">💻</span>
                                <span class="category-name">技术</span>
                                <span class="category-count">{{articles.length}}</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- 添加最新文章模块 -->
                <div class="recent-posts">
                    <h3>最新文章</h3>
                    <ul>
                        <li v-for="item in 3" :key="item" @click="goToArticle(articles[item-1]?.id)">
                            <a class="recent-post-item">
                                <div class="recent-post-thumbnail">
                                    <img :src="articles[item-1]?.thumbnail_url" alt="文章缩略图">
                                </div>
                                <div class="recent-post-info">
                                    <h4>{{articles[item-1]?.title}}</h4>
                                    <span class="recent-post-date">{{formatDate(articles[item-1]?.updated_at)}}</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </aside>
            <div class="floating-buttons">
              <button class="floating-button theme-toggle" @click="toggleTheme" title="切换主题">
                <span class="light-icon">🌞</span>
                <span class="dark-icon">🌙</span>
              </button>
              <!-- 添加创作按钮 -->
              <div class="floating-create-button" @click="goToRouter('create')" title="开始创作">
                  <span class="create-icon">✍️</span>
                  <span class="create-text">写文章</span>
              </div>
              <button 
                class="floating-button back-to-top" 
                :class="{ visible: isBackToTopVisible }"
                @click="scrollToTop" 
                title="返回顶部"
              >
                ↑
              </button>
            </div>
        </div>
        <!-- 加载状态提示 -->
        <div v-if="isLoading" class="loading-indicator">
            <div class="loading-spinner"></div>
            <span>加载中...</span>
        </div>
        
        <!-- 没有更多数据提示 -->
        <div v-if="noMoreData" class="no-more-data">
            没有更多数据了
        </div>
        <footer class="footer">
            <p>&copy; 2024 我的博客. All rights reserved.</p>
        </footer>
    </div>
</template>

<script lang="ts" setup>
import { defineComponent, onMounted, ref, watch, onUnmounted} from 'vue';
import { articleApi } from '@/api/article'
import { formatDate } from '@/utils/date'
import { useRouter } from 'vue-router'
import DOMPurify from 'dompurify' // 添加 DOMPurify 用于 XSS 防护
import AtjHeader from '@/components/AtjHeader.vue'
const router = useRouter()
defineComponent({
  name: 'HomeView',
  components: {
  },
});

// 状态
const loading = ref(false)
const error = ref('')
const articles = ref([])
const currentTag = ref<number | 'all'>('all')  // 明确类型
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const totalPages = ref(0)
const isLoading = ref(false)
const noMoreData = ref(false)

// 通告栏状态
const isAnnouncementVisible = ref(true);

// 返回顶部按钮状态
const isBackToTopVisible = ref(false);

// 主题状态
const theme = ref(localStorage.getItem('theme') || 
  (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));

// 关闭通告栏
const closeAnnouncement = () => {
  isAnnouncementVisible.value = false;
};

// 返回顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};

// 切换主题
const toggleTheme = () => {
  theme.value = theme.value === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', theme.value);
  localStorage.setItem('theme', theme.value);
};


// 加载更多数据
const loadMoreData = async () => {
    if (isLoading.value || noMoreData.value) return

    try {
        isLoading.value = true
        
        // 获取新数据
        const params = {
            page: currentPage.value + 1,
            pageSize: pageSize.value,
            search: searchQuery.value
        }
        
        const response = await articleApi.getArticles(params)
        
        if (response && response.data && response.data.length > 0) {
            // 更新页码和数据
            currentPage.value++
            articles.value = [...articles.value, ...response.data]
            total.value = response.total || articles.value.length
            totalPages.value = Math.ceil(total.value / pageSize.value)
        } else {
            noMoreData.value = true
        }
    } catch (err) {
        console.error('Error loading more data:', err)
    } finally {
        isLoading.value = false
    }
}
// 编程式导航
const goToArticle = (id:number) => {
  router.push({ path: '/article', query: { id: id } })
}
const goToRouter = (name:string) => {
  router.push(`/${name}`)
}
const searchQuery = ref('')
// 监听搜索查询变化
watch(searchQuery, () => {
    handleSearch()
})
// 自定义 debounce 函数
const debounce = <T extends (...args: any[]) => any>(
    fn: T,
    delay: number
) => {
    let timeoutId: ReturnType<typeof setTimeout>
    
    return function (this: any, ...args: Parameters<T>) {
        clearTimeout(timeoutId)
        timeoutId = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
}
// 重置加载状态
const resetLoadingState = () => {
    isLoading.value = false
    noMoreData.value = false
    currentPage.value = 1
}
// 防抖处理搜索
const handleSearch = debounce(async () => {
    resetLoadingState() // 重置加载状态
    await fetchArticles()
}, 300)
// 监听滚动
const handleScroll = debounce(async () => {
  isBackToTopVisible.value = window.scrollY > 300;

  // 如果正在加载或没有更多数据，则不处理
  if (isLoading.value || noMoreData.value) {
      return;
  }

  // 检查是否滚动到底部
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const clientHeight = document.documentElement.clientHeight;

  // 当距离底部 100px 时开始加载更多数据
  if (scrollHeight - scrollTop - clientHeight < 100) {
      await loadMoreData();
  }
}, 300);
// 高亮显示文本的函数
const highlightText = (text: string): string => {
    if (!text || !searchQuery.value) return text
    
    // 转义特殊字符，防止 XSS 攻击
    const sanitizedQuery = searchQuery.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    
    // 创建正则表达式，支持不区分大小写的全局匹配
    const regex = new RegExp(`(${sanitizedQuery})`, 'gi')
    
    // 替换匹配的文本并添加高亮样式
    const highlightedText = text.replace(regex, '<span class="highlight">$1</span>')
    
    // 使用 DOMPurify 清理 HTML，防止 XSS 攻击
    return DOMPurify.sanitize(highlightedText)
}
// 获取文章列表
const fetchArticles = async () => {
    loading.value = true
    error.value = ''
    
    try {
        // 添加最小加载时间以避免闪烁
        const minLoadingTime = 300
        const startTime = Date.now()
        
        const params: any = {
            page: currentPage.value,
            pageSize: pageSize.value,
            search: searchQuery.value // 添加搜索参数
        }
        
        if (currentTag.value !== 'all') {
            params.tag_id = currentTag.value
        }

        const response = await articleApi.getArticles(params)
        
        // 确保最小加载时间
        const elapsedTime = Date.now() - startTime
        if (elapsedTime < minLoadingTime) {
            await new Promise(resolve => setTimeout(resolve, minLoadingTime - elapsedTime))
        }
        
        if (response && Array.isArray(response.data)) {
            articles.value = response.data
            total.value = response.total || response.data.length
            totalPages.value = Math.ceil(total.value / pageSize.value)
        } else if (Array.isArray(response)) {
            articles.value = response
            total.value = response.length
            totalPages.value = Math.ceil(total.value / pageSize.value)
        } else {
            throw new Error('Invalid articles response format')
        }
    } catch (err) {
        error.value = '获取文章列表失败，请稍后重试'
        console.error('Error fetching articles:', err)
        articles.value = []
    } finally {
        loading.value = false
    }
}
onMounted(() => {
  // 初始化主题
  document.documentElement.setAttribute('data-theme', theme.value);
  
  // 添加滚动监听
  window.addEventListener('scroll', handleScroll);
  
  // 监听系统主题变化
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    if (!localStorage.getItem('theme')) {
      theme.value = e.matches ? 'dark' : 'light';
      document.documentElement.setAttribute('data-theme', theme.value);
    }
  });
  fetchArticles()
});
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll)
})
</script>
<style lang="less" scoped>
@import '@/assets/css/universal.css';
*{
  list-style: none;
}
/* 通告栏 */
.announcement {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
  padding: 15px 25px;
  border-radius: var(--radius-md);
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  animation: slideDown 0.5s ease-out;
  position: relative;
  overflow: hidden;
}

.announcement::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%
  );
  animation: shine 3s infinite linear;
}

.announcement-content {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.announcement-icon {
  font-size: 20px;
  animation: pulse 2s infinite;
}

.announcement-text {
  font-size: 15px;
  font-weight: 500;
}

.announcement-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
  cursor: pointer;
  padding: 0 8px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.announcement-close:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: rotate(90deg);
}
/* 搜索栏样式 */
.search-container {
    margin: 20px 0 30px;
    
    .search-box {
        display: flex;
        align-items: center;
        max-width: 600px;
        margin: 0 auto;
        background: var(--bg-light);
        border-radius: 50px;
        padding: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(26, 115, 232, 0.1);
        transition: all 0.3s ease;

        &:focus-within {
            box-shadow: 0 6px 16px rgba(26, 115, 232, 0.15);
            border-color: rgba(26, 115, 232, 0.3);
            transform: translateY(-1px);
        }
    }

    .search-input {
        flex: 1;
        padding: 12px 20px;
        border: none;
        background: transparent;
        font-size: 16px;
        color: var(--text-primary);
        outline: none;

        &::placeholder {
            color: #999;
            opacity: 0.8;
        }
    }

    .search-button {
        background: linear-gradient(135deg, #1a73e8, #1557b0);
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-right: 6px;

        &:hover {
            transform: scale(1.05);
            background: linear-gradient(135deg, #1557b0, #1a73e8);
        }

        &:active {
            transform: scale(0.95);
        }

        .search-icon {
            font-size: 18px;
        }
    }

    .search-results-count {
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
        color: #666;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .search-container {
        .search-box {
            background: #2c2c2c;
            border-color: rgba(255, 255, 255, 0.1);
        }

        .search-input {
            color: #fff;

            &::placeholder {
                color: #666;
            }
        }

        .search-results-count {
            color: #999;
        }
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .search-container {
        margin: 15px 0 25px;
        padding: 0 15px;

        .search-box {
            .search-input {
                font-size: 14px;
                padding: 10px 15px;
            }

            .search-button {
                width: 36px;
                height: 36px;

                .search-icon {
                    font-size: 16px;
                }
            }
        }
    }
}

/* 高亮样式 */
:deep(.highlight) {
    background: linear-gradient(120deg, rgba(26, 115, 232, 0.2), rgba(26, 115, 232, 0.1));
    color: var(--primary-color);
    border-radius: 3px;
    padding: 0 2px;
    margin: 0 -2px;
    font-weight: 500;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-color), transparent);
        opacity: 0.5;
    }

    &:hover {
        background: linear-gradient(120deg, rgba(26, 115, 232, 0.3), rgba(26, 115, 232, 0.2));
        transform: translateY(-1px);
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    :deep(.highlight) {
        background: linear-gradient(120deg, rgba(26, 115, 232, 0.3), rgba(26, 115, 232, 0.2));
        color: #89b4f4;

        &::after {
            background: linear-gradient(90deg, #89b4f4, transparent);
        }

        &:hover {
            background: linear-gradient(120deg, rgba(26, 115, 232, 0.4), rgba(26, 115, 232, 0.3));
        }
    }
}
/* 加载指示器样式 */
.loading-indicator {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    animation: fadeIn 0.3s ease;

    .loading-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
}

/* 没有更多数据提示样式 */
.no-more-data {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
    background: #f5f5f5;
    border-radius: 8px;
    margin: 20px 0;
}

/* 动画关键帧 */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .no-more-data {
        background: #2c2c2c;
        color: #666;
    }
}
/* 主要内容区域 */
.main-content {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 40px;
}

/* 文章部分 */
.articles-section {
  background: var(--bg-light);
  padding: 30px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.post {
  cursor: pointer;
  padding: 25px;
  margin-bottom: 30px;
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.post:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(26, 115, 232, 0.2);
}

.post h2 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.8em;
  font-weight: 600;
  line-height: 1.3;
}

/* 文章元信息 */
.post-meta {
  display: flex;
  gap: 20px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 14px;
}

.post-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-excerpt {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 20px 0;
  position: relative;
  padding-left: 20px;
  border-left: 3px solid;
  border-image: linear-gradient(to bottom, var(--primary-color), var(--secondary-color)) 1;
}

/* 标签 */
.post-tags {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(26, 115, 232, 0.1);
  color: var(--primary-color);
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition-base);
  cursor: pointer;
}

.tag:hover {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.2);
}

.read-more {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: rgba(26, 115, 232, 0.1);
  transition: var(--transition-base);
}

.read-more:hover {
  transform: translateX(5px);
  background: rgba(26, 115, 232, 0.2);
}

/* 侧边栏 */
.sidebar {
  background: var(--bg-light);
  padding: 25px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  overflow-y: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 关于我 */
.about-me {
  text-align: center;
  margin-bottom: 30px;
  padding: 25px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg,
      rgba(99, 102, 241, 0.1) 0%,
      rgba(26, 115, 232, 0.1) 100%
  );
}

.about-me h3 {
  color: var(--primary-color);
  margin-bottom: 20px;
  font-size: 1.4em;
  position: relative;
}

.about-me h3::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 20px auto;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
}

.avatar:hover {
  transform: rotate(5deg) scale(1.05);
}

/* 分类 */
.categories {
  margin-bottom: 30px;
}

.categories h3,
.recent-posts h3 {
  color: var(--primary-color);
  margin-bottom: 20px;
  font-size: 1.4em;
  padding: 0 15px;
  position: relative;
  display: inline-block;
}

.categories h3::after,
.recent-posts h3::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 15px;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}

.category-item {
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  transition: var(--transition-base);
  background: transparent;
  border: 1px solid rgba(26, 115, 232, 0.1);
}

.category-icon {
  width: 35px;
  height: 35px;
  margin-right: 12px;
  background: linear-gradient(135deg,
      rgba(99, 102, 241, 0.1) 0%,
      rgba(26, 115, 232, 0.1) 100%
  );
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.category-name {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
}

.category-count {
  background: rgba(26, 115, 232, 0.1);
  color: var(--primary-color);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

.category-item:hover {
  background: rgba(26, 115, 232, 0.05);
  transform: translateX(5px);
}

.category-item:hover .category-icon {
  background: rgba(26, 115, 232, 0.2);
  transform: scale(1.1);
}

.category-item:hover .category-count {
  background: var(--primary-color);
  color: #fff;
}

/* 最新文章 */
.recent-posts {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.recent-post-item {
  display: flex;
  padding: 12px;
  border-radius: var(--radius-md);
  margin-bottom: 15px;
  transition: var(--transition-base);
  text-decoration: none;
  border: 1px solid rgba(26, 115, 232, 0.1);
}

.recent-post-item:hover {
  background: rgba(26, 115, 232, 0.05);
  transform: translateX(5px);
}

.recent-post-thumbnail {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-right: 12px;
  position: relative;
}

.recent-post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-base);
}

.recent-post-thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(99, 102, 241, 0.2) 0%,
      rgba(26, 115, 232, 0.2) 100%
  );
  opacity: 0;
  transition: var(--transition-base);
}

.recent-post-item:hover .recent-post-thumbnail::after {
  opacity: 1;
}

.recent-post-info {
  flex: 1;
}

.recent-post-info h4 {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
  line-height: 1.4;
}

.recent-post-date {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 悬浮按钮 */
.floating-buttons {
  position: fixed;
  right: 25px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

.floating-button {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary-color);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
/* 悬浮按钮光效 */
.floating-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 悬浮按钮涟漪效果 */
.floating-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, 
      rgba(255, 255, 255, 0.8) 0%,
      transparent 70%
  );
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.floating-button:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, 
      var(--primary-color),
      var(--secondary-color)
  );
  color: #fff;
  box-shadow: 
      0 8px 20px rgba(26, 115, 232, 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.1) inset;

  padding: 0 25px;
}
.floating-button:hover::before {
  opacity: 1;
}

.floating-button:active::after {
  transform: translate(-50%, -50%) scale(2);
  opacity: 1;
}
/* 主题切换按钮 */
.theme-toggle {
  position: relative;
}

.theme-toggle .light-icon,
.theme-toggle .dark-icon {
  position: absolute;
  transition: all 0.3s ease;
}
[data-theme="dark"] .theme-toggle .light-icon {
  opacity: 1;
  transform: rotate(0deg);
}

[data-theme="dark"] .theme-toggle .dark-icon {
  opacity: 0;
  transform: rotate(90deg);
}

.theme-toggle .light-icon {
  opacity: 0;
  transform: rotate(-90deg);
}

.theme-toggle .dark-icon {
  opacity: 1;
  transform: rotate(0deg);
}
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
/* 按钮文本标签 */
.floating-button span {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.floating-button:hover span {
  opacity: 1;
  transform: translateX(0);
}

/* 暗色模式适配 */
[data-theme="dark"] .floating-button {
  background: rgba(30, 34, 39, 0.95);
  box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .floating-buttons {
      right: 20px;
      bottom: 20px;
      gap: 12px;
  }

  .floating-button {
      width: 45px;
      height: 45px;
      font-size: 18px;
  }

  .floating-button:hover {
      width: 45px;
      padding: 0;
      transform: translateY(-3px);
  }

  .floating-button span {
      display: none;
  }
}

/* 动画 */
@keyframes gradientMove {
  0%, 100% {
      background-position: 0% 0%, 0% 0%, 0 0, 50px 50px;
  }
  50% {
      background-position: 100% 100%, 100% 50%, 0 0, 50px 50px;
  }
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes slideDown {
  from {
      transform: translateY(-100%);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
      padding: 15px;
  }

  .main-content {
      grid-template-columns: 1fr;
      gap: 30px;
  }
  
  .nav-menu ul {
      flex-direction: column;
      align-items: center;
      gap: 15px;
  }
  
  .post {
      padding: 20px;
  }

  .post h2 {
      font-size: 1.5em;
  }

  .sidebar {
      position: static;
      height: auto;
  }

  .floating-buttons {
      right: 15px;
      bottom: 15px;
  }

  .floating-button {
      width: 40px;
      height: 40px;
      font-size: 18px;
  }
}

/* 暗色模式 */
[data-theme="dark"] {
  --text-primary: #e4e7eb;
  --text-secondary: #a0aec0;
  --bg-light: rgba(30, 34, 39, 0.95);
  
  body {
      background: linear-gradient(135deg, var(--bg-dark) 0%, #2c3e50 100%);
      background-image:
          radial-gradient(circle at 50% -20%, rgba(99, 102, 241, 0.2) 0%, transparent 70%),
          linear-gradient(45deg, 
              rgba(147, 51, 234, 0.15) 0%,
              rgba(99, 102, 241, 0.15) 50%,
              rgba(147, 51, 234, 0.15) 100%
          );
  }
  
  .header,
  .articles-section,
  .sidebar,
  .floating-button {
      background: var(--bg-light);
      border-color: rgba(255, 255, 255, 0.1);
  }
  
  .post,
  .recent-post-item,
  .category-item {
      border-color: rgba(255, 255, 255, 0.1);
  }
  
  .tag,
  .category-icon,
  .category-count {
      background: rgba(255, 255, 255, 0.1);
  }
  
  .read-more {
      background: rgba(255, 255, 255, 0.1);
  }
  
  .recent-posts {
      border-top-color: rgba(255, 255, 255, 0.1);
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--secondary-color), var(--primary-color));
}
/* 文章卡片高级效果 */
.post {
  /* 已有样式保持不变 */
  position: relative;
  z-index: 1;
}

.post::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
      rgba(99, 102, 241, 0.1),
      rgba(26, 115, 232, 0.1)
  );
  opacity: 0;
  transition: var(--transition-base);
  z-index: -1;
}

.post:hover::before {
  opacity: 1;
}

/* 分类列表增强 */
.categories {
  margin-bottom: 40px;
}

.categories h3 {
  margin-bottom: 20px;
  font-size: 1.2em;
  color: var(--text-primary);
  position: relative;
  padding-left: 15px;
}

.categories h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  transition: var(--transition-base);
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.1)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.category-item:hover {
  transform: translateX(5px);
  background: linear-gradient(135deg,
      rgba(99, 102, 241, 0.1),
      rgba(26, 115, 232, 0.1)
  );
}

/* 加载状态 */
.loading-skeleton {
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1) 25%,
      rgba(255, 255, 255, 0.2) 37%,
      rgba(255, 255, 255, 0.1) 63%
  );
  background-size: 400% 100%;
  animation: skeletonLoading 1.4s ease infinite;
}

@keyframes skeletonLoading {
  0% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}

/* 图片懒加载效果 */
.lazy-image {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.5s ease;
}

.lazy-image.loaded {
  opacity: 1;
  transform: scale(1);
}


/* 标签云 */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.tag-cloud-item {
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  color: var(--text-primary);
  background: linear-gradient(135deg,
      rgba(99, 102, 241, 0.1),
      rgba(26, 115, 232, 0.1)
  );
  transition: var(--transition-base);
  cursor: pointer;
}

.tag-cloud-item:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg,
      var(--primary-color),
      var(--secondary-color)
  );
  color: #fff;
}

/* 图片预览效果 */
.image-preview {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.image-preview img {
  transition: var(--transition-base);
}

.image-preview:hover img {
  transform: scale(1.05);
}

.image-preview::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 100%
  );
  opacity: 0;
  transition: var(--transition-base);
}

.image-preview:hover::after {
  opacity: 1;
}

/* 悬浮创作按钮 */
.floating-create-button {
    position: fixed;
    right: 40px;
    bottom: 150px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    
    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    .create-icon {
        font-size: 20px;
    }

    .create-text {
        font-size: 16px;
        font-weight: 500;
    }

    /* 添加动画效果 */
    animation: bounce 1s ease infinite;
}

/* 弹跳动画 */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .floating-create-button {
        right: 20px;
        bottom: 115px;
        padding: 10px 20px;
        
        .create-text {
            display: none; /* 在移动端只显示图标 */
        }
    }
}
</style>
